<template>
  <div :style="{width:'100%',height:'100%'}" ref="homeEch"></div>
</template>

<script>
export default {
  name: "Age",
  data() {
    return {
      data: [],
      agelist: [{}]
    };
  },
  created() {
    // this.echarts();
  },
  mounted() {
    this.echarts();
    this.resizefun = () => {
      this.$echarts.init(this.$refs.homeEch).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
  methods: {
    // 年龄比例接口
    echarts() {
      let that = this;
      let myChart = this.$echarts.init(this.$refs.homeEch);
      that.axios.post(`${that.$store.state.http}/list/getTotalSign`).then(res => {
        let data = res.data.data;
        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ["上班", "下班"],
            textStyle: {
              color: "#fff"
            }
          },
          grid: {
            x: 46,
            y: 30,
            x2: 32,
            y2: 40,
            borderWidth: 0
          },
          calculable: true,
          xAxis: [
            {
              type: "category",
              data: data.names,

              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: "#fff"
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          yAxis: [
            {
              type: "value",
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: "#fff"
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          series: [
            {
              name: "上班",
              type: "line",
              data: data.list[0].value,
              markPoint: {
                data: [
                  { type: "max", name: "最大值" },
                  { type: "min", name: "最小值" }
                ]
              },
              itemStyle: {
                color: "#F7602C"
              },
              markLine: {
                data: [{ type: "average", name: "平均值" }]
              }
            },
            {
              name: "下班",
              type: "line",
              data: data.list[1].value,
              markPoint: {
                data: [{ name: "周最低", value: -2, xAxis: 1, yAxis: -1.5 }]
              },
              itemStyle: {
                color: "#A72B47"
              },
              markLine: {
                data: [
                  { type: "average", name: "平均值" },
                  [
                    {
                      symbol: "none",
                      x: "90%",
                      yAxis: "max"
                    },
                    {
                      symbol: "circle",
                      label: {
                        normal: {
                          position: "start",
                          formatter: "最大值"
                        }
                      },
                      type: "max",
                      name: "最高点"
                    }
                  ]
                ]
              }
            }
          ]
        };
        myChart.setOption(option);
      });
    }
  }
};
</script>

<style>
</style>